<!DOCTYPE html>
<html>
<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--在浏览器显示图标-->
    <link rel="icon" href="{{=url_for_static('ico/favicon.ico')}}" type="image/x-icon" />
    <link rel="shortcut icon" href="{{=url_for_static('ico/favicon.ico')}}" type="image/x-icon" />
	<title>用户登录</title> 

    {{use "jquery",version="2.2.2"}}
    {{use "bootstrap",version="3.3.5"}}
	{{use "nice_validator",version="0.10.8"}}
    <link href="{{=url_for_static('css/login.css')}}" rel="stylesheet">
        <style>
    .n-bootstrap .msg-wrap {font-size: 14px; margin-top: 3px}
    </style>
</head> 
<body>
<div class="container">
	<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 loginbox"> 
		<div class="panel panel-info" > 
			<div class="panel-heading"> 
				<div class="panel-title"> 用户登录 </div> 
			</div> 
			<div class="panel-body panel-pad">
				<div id="loginalert" class="alert alert-danger col-sm-12 login-alert"></div> 
					<form id="loginform" class="form-horizontal" role="form">
						<input type="hidden" name="next" value="{{=next}}" />
						<div class="input-group margT25"> 
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-user"></i>
							</span> 
							<input id="loginusername" type="text" class="form-control" name="username" value="" placeholder="登录账号"> 
						</div> 
						<div class="input-group margT25"> 
							<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
							<input id="loginpassword" type="password" class="form-control" name="password" placeholder="登录密码"> 
						</div> 
						<div class="input-group"> 
							<div class="checkbox"> 
								<label> 
									<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me 
								</label> 
							</div> 
						</div> 
						<div class="form-group margT10"> 
						<!-- Button --> 
							<div class="col-sm-12 controls"> 
								<a id="btn-login" class="btn btn-block btn-primary"> 登录 </a> 
							</div> 
						</div> 
						<div class="form-group"> 
							<div class="col-md-12 control"> 
								<div class="no-acc"> 
									<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()"> 注册新账号 </a> 
									<div class="forgot-password"> <a href="#" onClick="$('#loginbox').hide(); $('#forgotpasswdbox').show()">忘记密码</a> </div> 
								</div> 
							</div> 
						</div> 
					</form> 
				</div> 
			</div> 
	</div> 

	<div id="signupbox" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 signup-box"> 
		<div class="panel panel-info"> 
			<div class="panel-heading"> 
				<div class="panel-title"> 注册新账号 </div> 
				<div class="signin"> 
						<a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">登录</a> 
				</div> 
			</div> 
			<div class="panel-body"> 
				<form id="signupform" class="form-horizontal" role="form" data-validator-option="{theme:'bootstrap', timely:2, stopOnError:true}"> 
					<div id="signupalert" class="alert alert-danger login-alert"> 
						<p> Error: </p> 
						<span></span> 
					</div> 
					 <div class="form-group"> 
					 	<label for="firstname" class="col-md-3 control-label">用户名</label> 
					 	<div class="col-md-9"> 
					 		<input type="text" class="form-control" id="username" name="username" 
					 		data-rule="required;username;length(4~30);remote[/checkusername]"
					 		data-rule-username="[/[\w\d]{4,30}/, '用户名无效! 仅支持字母与数字。']"
					 		data-tip="不能少于4个字符"
					 		placeholder="登录用户名"> 
					 	</div> 
					 </div> 
					 <div class="form-group"> 
					 	<label for="lastname" class="col-md-3 control-label">姓名</label> 
					 	<div class="col-md-9"> 
					 		<input type="text" class="form-control" id="nickname" name="nickname" 
					 		data-rule="required;length(2~15)" 
					 		placeholder="真实名字"> 
					 	</div> 
					 </div> 
					 <div class="form-group"> 
					 	<label for="password" class="col-md-3 control-label">密码</label> 
					 	<div class="col-md-9"> 
					 		<input type="password" class="form-control" id="password" name="password" 
					 		data-rule="密码: required; length(6~30)"
					 		placeholder="登录密码"> 
					 	</div> 
					 </div>
					 <div class="form-group"> 
					 	<label for="password" class="col-md-3 control-label">密码确认</label> 
					 	<div class="col-md-9"> 
					 		<input type="password" class="form-control" id="password2" name="password2" 
					 		data-rule="密码确认: required; match(password)"
					 		placeholder="在输一次密码"> 
					 	</div> 
					 </div>
					<div class="form-group"> 
						<label for="email" class="col-md-3 control-label">邮箱</label>
					 	<div class="col-md-9"> 
					 		<input type="email" class="form-control" id="email" name="email" 
					 		data-rule="required;email"
					 		placeholder="邮箱地址"> 
					 	</div> 
					</div>
					 <div class="form-group"> 
					 	<label for="icode" class="col-md-3 control-label">联系电话</label> 
					 	<div class="col-md-9"> 
					 		<input type="text" class="form-control" id="mobile" name="mobile" 
					 		data-rule="required; mobile;"
					 		placeholder="输入手机号"> 
					 	</div> 
					 </div> 
					 <div class="form-group"> 
					 <!-- Button --> 
					 	<div class="col-md-offset-3 col-md-9"> 
					 		<button id="btn-signup" type="submit" class="btn btn-success"> <i class="icon-hand-right"></i> &nbsp; 注册 </button>
					 	</div> 
					 </div> 
				</form> 
			</div> 
		</div> 
	</div>

	<div id="signupboxinfo" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 signup-box"> 
		<div class="panel panel-info"> 
			<div class="panel-heading"> 
				<div class="panel-title"> 注册账号成功 </div> 
				<div class="signin"> 
					<a id="signinlink" href="/login">返回登录</a> 
				</div> 
			</div> 

			<div class="panel-body"> 
					<div id="signupalert" class="alert alert-danger"> 
						<p>  提示: 账号注册成功，当前您无法登录。请耐心等待管理员解锁。</p> 
						<span></span> 
					</div> 
			</div> 
		</div> 
	</div>

    <div id="forgotpasswdbox" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 signup-box"> 
        <div class="panel panel-info"> 
            <div class="panel-heading"> 
                <div class="panel-title"> 密码找回 </div> 
                <div class="signin"> 
                        <a id="signinlink" href="#" onclick="$('#forgotpasswdbox').hide(); $('#loginbox').show()">登录</a> 
                </div> 
            </div> 
            <div class="panel-body"> 
                <form id="signupform" class="form-horizontal" role="form"> 
                    <div id="forgotalert" class="alert alert-danger login-alert"> 
                        <p> Error: </p> 
                        <span></span> 
                    </div> 
                    <div class="form-group"> 
                        <p class="text-muted text-center">输入注册邮箱</p>
                        <label for="email" class="col-md-3 control-label">邮箱</label>
                        <div class="col-md-9"> 
                            <input type="text" class="form-control" name="email" placeholder="账号注册邮箱"> 
                        </div> 
                     </div> 

                     <div class="form-group"> 
                     <!-- Button --> 
                        <div class="col-md-offset-3 col-md-9"> 
                            <button id="btn-forgot" type="button" class="btn btn-danger"> <i class="icon-hand-right"></i> &nbsp; 提交 </button>
                        </div> 
                     </div> 
                </form> 
            </div> 
        </div> 
    </div>

</div> 

<script type="text/javascript">

    var $loginusername = $('#loginusername');
    var $loginpassword = $('#loginpassword');
    var $btnlogin = $('#btn-login');
    var $btnsignup = $('#btn-signup');
    var $btnforgot = $('#btn-forgot');

    $(function() {

        $loginusername.focus();

        //登录函数
        function login(){

        	if($loginusername.val()=="" || $loginpassword.val()==""){
                 $("#loginalert").show().html("用户名或密码为空，请输入");
                 $loginusername.focus();
            }else{
                //ajax异步提交  
               $.ajax({            
                      type:"POST",   //post提交方式默认是get
                      url:"/login", 
                      dataType:"json",
                      data:$("#loginform").serialize(),   //序列化               
                      error:function(request) {      // 设置表单提交出错                 
                          $("#loginalert").show().html(request);  //登录错误提示信息
                      },
                      success:function(data) {
                          if(data.status != 200){
                              $("#loginalert").show().html(data.msg);
                          }else{
                            document.location = data.url;
                          }
                      }         
                });       
            }
        } 

        //按回车登录
		document.onkeydown = function(e){
		    var event = e || window.event;  
		    var code = event.keyCode || event.which || event.charCode;
		    if (code == 13) {
		        login();
		    }
		}

        $btnlogin.click(function () {
        	login();
        }); 

        //注册
        // Custom theme
	    $.validator.setTheme('bootstrap', {
	        validClass: 'has-success',
	        invalidClass: 'has-error',
	        bindClassTo: '.form-group',
	        formClass: 'n-default n-bootstrap',
	        msgClass: 'n-right'
	    });

	    $('#signupform').validator({
	    	valid: function(form){
		        //表单验证通过，提交表单到服务器
		        $.ajax({
		            type:"POST",   //post提交方式默认是get
                    url:"/register", 
                    dataType:"json",
		            data: $(form).serialize(),
		            success: function(d){
		                if(d.status != 200){
	                        $("#signupalert").show().html(d.msg);
	                    }else{
	                        $('#signupbox').hide(); $('#signupboxinfo').show()
	                    }
		            }
		        });
		    }
	    });

	    //密码找回
	    $btnforgot.click(function () {
        	$("#forgotalert").show().html("功能设计中。。。");
        }); 

    });

</script>
</body> 
</html> 